<%@ page language="java" contentType="text/html; charset=gbk"
    pageEncoding="gbk"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<link rel="stylesheet" href="../../style/weui/weui.min.css"/>
<link rel="stylesheet" href="../../style/custom.css"/>
<script type="text/javascript" src="../../script/jquery-2.1.4.js"></script>
<script type="text/javascript" src="../../script/commonjs.js?p"></script>
<title><spring:message code="productDetails"/></title>
<style type="text/css">
body{
    background-color: #efeff4;
}
.weui_label{
    white-space: nowrap;
    width: 5em;
}
.weui_select{
    padding-left: 0;
}
ul li{
    display: inline;
}
</style>
</head>
<body>
<c:set var="constantHeader" value="false"/>
<c:set var="headerContent" value="${product.productName }"/>
<%@include file="./common/header.jsp"%>
    <div class="weui_panel weui_panel_access">
        <div class="weui_panel_bd" id="containerDiv">
                <div class="weui_media_box weui_media_appmsg">
                    <div class="weui_media_hd" style="width: 650px; height: 200px; text-align: center;">
                        <img class="weui_media_appmsg_thumb" src="../../images/vr<c:out value="${product.imageId}"/>_large.jpg" alt="">
                    </div>
                 </div>
                 <div class="weui_media_box weui_media_appmsg">
                        <ul class="weui_media_desc" style="display: inline;">
                            <li style="color: red; font-weight: bold; float: left;">${product.unitPrice }</li>
                            <li onclick="addToCart('<c:out value="${product.productId }"/>')" style="float: left; margin-left: 10px; text-decoration: underline; cursor: pointer;"><spring:message code="addToCart" /></li>
                            <li onclick="toBuy('<c:out value="${product.productId }"/>')" style="float: left; margin-left: 10px; text-decoration: underline; cursor: pointer;"><spring:message code="toBuy" /></li>
                        </ul>
                 </div>
                <div class="weui_media_box weui_media_appmsg">
                    <div class="weui_media_bd">
                        <p class="weui_media_desc">${product.productDescription }</p>
                        <div>
                            <span class="weui_media_desc" onclick="expandAll(this)" style="float: right; text-decoration: underline; cursor: pointer;">
                                <spring:message code="details"/>
                            </span>
                            <span class="weui_media_desc" onclick="collpaseDesc(this)" style="float: right; display: none; text-decoration: underline; cursor: pointer;">
                                <spring:message code="collapse"/>
                            </span>
                        </div>
                    </div>
                </div>
        </div>
         <div class="weui_media_box weui_media_text">
            <p class="weui_media_desc"><spring:message code="comments" /> </p>
         </div>
        <div class="weui_panel_bd" id="commentsContainer">
         <c:forEach items="${pageQuery.data }" var="comment">
                <div class="weui_media_box weui_media_text">
                        <p class="weui_media_desc" style="margin-bottom: 5px;">${comment.comments }</p>
                        <ul class="weui_media_desc" style="display: inline;">
                            <li style="float: left;">${comment.userName }</li>
                            <li style="float: right;">${comment.commentsDate }</li>
                        </ul>
                    </div>
        </c:forEach>
        </div>
        <table id="limitForm" style="display:none;">
            <tr>
                <td name="fromIndex" id="fromIndex">${pageQuery.fromIndex }</td>
            </tr>
        </table>
        <a class="weui_panel_ft" style="margin-top: 0px;" href="javascript:queryMoreComments('<c:out value="${product.productId }"/>','limitForm')"><spring:message code="more"/></a>
    </div>
<%@include file="./common/toast.jsp" %>
    <div id="errorList"></div>
<%@include file="./common/footer.jsp" %>
<script>
function queryMoreComments(productId,formId){
    //console.log(convertForm2Json("#"+formId));
    var ajaxUrl = '<c:url value="/comments/'+productId+'/morecomments.od"/>';
    $.ajax({url: ajaxUrl,
           //data: JSON.stringify(convertForm2Json("#"+formId)),
           data: convertForm2Json("#"+formId),
           dataType: "json",
           //contentType: "application/json",
           type: "POST",
           success: function(data){
               //console.log(data)
               if(0 < data.data.length) {
                   $.each(data.data, function(index,item){ // data.data - data is a propery in java object
                       console.log(item.comments,item.userName,item.commentsDate);
                       appendHtml(item.comments,item.userName,item.commentsDate);
                   });
                   $("#fromIndex").text(data.fromIndex);
               } else {
               }
           },
           error: function(HttpRequest, textStatus, errorThrown){
               $("#errorList").html(textStatus);
               $("#errorList").append("<br/>"+HttpRequest.status);
               $("#errorList").append("<br/>"+HttpRequest.readyState);
               $("#errorList").append("<br/>"+HttpRequest.responseText);
           }
    });
    //$.post("http://localhost:8080"+$(formId+"action").val(),convertForm2Json(formId),function(){alert("1");},"json");
}

function appendHtml(comments,userName,commentsDate) {
    var html = "<div class=\"weui_media_box weui_media_text\">"
             + "<p class=\"weui_media_desc\" style=\"margin-bottom: 5px;\">"+ comments +"</p>"
             + "<ul class=\"weui_media_desc\" style=\"display: inline;\">"
             + "<li style=\"float: left;\">"+userName+"</li>"
             + "<li style=\"float: right;\">"+commentsDate+"</li>"
             + "</ul>"
             + "</div>";
    $("#commentsContainer").append(html);
}

var displayStyle;
function expandAll(object) {
    displayStyle = $(object).parent().prev().css("display");
    $(object).parent().prev().css("display","block");
    $(object).css("display","none");
    $(object).next().css("display","block");
}
function collpaseDesc(object) {
    $(object).parent().prev().css("display",displayStyle);
    $(object).css("display","none");
    $(object).prev().css("display","block");
}

function addToCart(pid) {
    var ajaxUrl = '<c:url value="/product/'+pid+'/addtocart.od"/>';
    $.ajax({url: ajaxUrl,
           //data: JSON.stringify(convertForm2Json("#"+formId)),
           //data: convertForm2Json("#"+formId),
           //dataType: "json",
           //contentType: "application/json",
           type: "POST",
           success: function(data){
               $("#cartSize").text(data[0]);
           },
           error: function(HttpRequest, textStatus, errorThrown){
               $("#errorList").html(textStatus);
               $("#errorList").append("<br/>"+HttpRequest.status);
               $("#errorList").append("<br/>"+HttpRequest.readyState);
               $("#errorList").append("<br/>"+HttpRequest.responseText);
           }
    });
}

function toBuy(pid) {
    location = '<c:url value="/product/'+pid+'/buyproduct.od"/>';
}
</script>

<script id="test" type="text/html">
        <a href="javascript:void(0);" class="weui_media_box weui_media_appmsg">
            <div class="weui_media_hd" style="width:120px; height:67px;">
                <img class="weui_media_appmsg_thumb" src="../images/vr<c:out value="${product.imageId}"/>.jpg" alt="">
            </div>
            <div class="weui_media_bd">
                <h4 class="weui_media_title">${product.productName }</h4>
                <p class="weui_media_desc">${product.productDescription }</p>
            </div>
        </a>
</script>
</body>
</html>